<template>
    <div>
      <ul class="navlist">
        <li class="navitem" v-for="(item,index) of items" :key="index" @click="$router.push(item.push)">
          <img :src="item.icon" alt="">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'nav-list',
  data: function () {
    return {
      items: [
        {
          name: '学校概况',
          icon: '../../static/images/school.png',
          push: '/school'
        },
        {
          name: '课程分类',
          icon: '../../static/images/course.png',
          push: '/course'
        },
        {
          name: '教材介绍',
          icon: '../../static/images/jiaocai.png',
          push: '/book'
        },
        {
          name: '主题内容',
          icon: '../../static/images/article.png',
          push: '/article'
        },
        {
          name: '名家讲师',
          icon: '../../static/images/teacher.png',
          push: '/teacher'
        }
      ]
    }
  }
}
</script>

<style scoped>
.navlist{
  display: flex;
  justify-content: space-between;
  align-self: center;
  padding: .4rem .3rem;
  border-bottom: .2rem solid #f2f2f2;
}
.navitem{
  text-align: center;
}
.navitem img{
  width: 1.2rem;
  height: 1.2rem;
}
.navitem p{
  margin-top: .2rem;
  font-size: .38rem;
}
</style>
